<script setup>
import { ref } from 'vue';
import { useRouter, RouterLink } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';

const router = useRouter();
const searchQuery = ref('');

// 用户数据 - 浏览记录和收藏
const viewHistory = ref([]);
const userFavorites = ref([]);

// 添加到浏览记录的函数
const addToHistory = (item) => {
  // 检查是否已存在，避免重复
  const exists = viewHistory.value.some(historyItem => historyItem.name === item.name);
  if (!exists) {
    // 添加时间戳
    const historyItem = {
      ...item,
      timestamp: new Date().toISOString()
    };
    // 添加到开头
    viewHistory.value.unshift(historyItem);
    // 限制历史记录数量
    if (viewHistory.value.length > 20) {
      viewHistory.value.pop();
    }
    console.log('已添加到浏览记录:', historyItem);
  }
};

// 切换收藏状态的函数
const toggleFavorite = (item) => {
  const exists = userFavorites.value.some(fav => fav.name === item.name);
  if (exists) {
    // 移除收藏
    userFavorites.value = userFavorites.value.filter(fav => fav.name !== item.name);
    console.log('已取消收藏:', item.name);
  } else {
    // 添加收藏
    const favItem = {
      ...item,
      favoriteTime: new Date().toISOString()
    };
    userFavorites.value.push(favItem);
    console.log('已添加收藏:', favItem);
  }
};

// 检查是否已收藏
const isFavorite = (item) => {
  return userFavorites.value.some(fav => fav.name === item.name);
};

// 检查偏好是否被选中
const isHobbySelected = (hobby) => {
  return selectedHobbies.value.some(h => h.name === hobby.name);
};

// 移除不再需要的函数，因为现在推荐系统直接包含匹配信息
// getMatchingHobbyName 已不再需要，因为推荐数据中直接包含匹配信息

// 模拟数据 - 景点地区分类
const regions = [
  {
    name: '川藏',
    count: 256,
    image: '/src/assets/雪山.webp',
    history: '川藏地区拥有悠久的历史文化，是藏族、羌族等少数民族聚居地，保留着浓厚的宗教氛围和传统习俗。',
    scenery: ['布达拉宫', '稻城亚丁', '贡嘎雪山', '四姑娘山'],
    food: ['酥油茶', '青稞酒', '牦牛肉', '糌粑'],
    checkIn: ['拉萨八廓街', '林芝桃花沟', '新都桥', '雅鲁藏布江大峡谷']
  },
  {
    name: '云南',
    count: 189,
    image: '/src/assets/云南.png',
    history: '云南是人类文明重要发祥地之一，拥有25个少数民族，各民族文化交相辉映，形成了独特的多元文化景观。',
    scenery: ['丽江古城', '大理洱海', '西双版纳', '玉龙雪山'],
    food: ['过桥米线', '汽锅鸡', '烧饵块', '云南鲜花饼'],
    checkIn: ['大理双廊', '丽江束河古镇', '昆明滇池', '香格里拉普达措']
  },
  {
    name: '江浙沪',
    count: 324,
    image: '/src/assets/江浙沪.png',
    history: '江浙沪地区是江南文化的核心区域，历史悠久，人文荟萃，是中国经济文化最发达的地区之一。',
    scenery: ['杭州西湖', '苏州园林', '上海外滩', '乌镇古镇'],
    food: ['西湖醋鱼', '小笼包', '东坡肉', '松鼠桂鱼'],
    checkIn: ['杭州雷峰塔', '苏州平江路', '上海迪士尼', '南京夫子庙']
  },
  {
    name: '东北',
    count: 143,
    image: '/src/assets/东北.png',
    history: '东北地区历史上是满族等少数民族的聚居地，近代以来成为中国重要的工业基地，有着独特的黑土地文化。',
    scenery: ['长白山', '哈尔滨冰雪大世界', '沈阳故宫', '大连金石滩'],
    food: ['锅包肉', '东北饺子', '酸菜白肉', '朝鲜冷面'],
    checkIn: ['哈尔滨中央大街', '长春净月潭', '沈阳中街', '大连星海广场']
  },
  {
    name: '广东',
    count: 205,
    image: '/src/assets/广东.png',
    history: '广东是中国古代海上丝绸之路的起点，近代以来开风气之先，是岭南文化的中心，商业氛围浓厚。',
    scenery: ['广州塔', '丹霞山', '开平碉楼', '深圳世界之窗'],
    food: ['广式早茶', '烧腊', '潮汕牛肉火锅', '煲仔饭'],
    checkIn: ['广州沙面', '深圳东门', '珠海情侣路', '佛山祖庙']
  },
  {
    name: '福建',
    count: 176,
    image: '/src/assets/福建.png',
    history: '福建是海上丝绸之路的重要起点，闽南文化、客家文化交相辉映，拥有众多历史古迹和自然景观。',
    scenery: ['武夷山', '土楼', '厦门鼓浪屿', '霞浦滩涂'],
    food: ['沙茶面', '佛跳墙', '土笋冻', '海蛎煎'],
    checkIn: ['厦门曾厝垵', '福州三坊七巷', '泉州开元寺', '莆田湄洲岛']
  }
];

// 当前选中的地区
const selectedRegion = ref(null);
// 显示地区详情的状态
const showRegionDetail = ref(false);

// 模拟数据 - 旅行偏好标签（简约时尚设计）
const hobbies = [
  { name: '徒步登山', icon: 'fa-pagelines', textColor: 'text-emerald-600', borderColor: 'border-emerald-200', color: 'bg-gradient-to-br from-emerald-500 to-teal-600', tagline: '挑战高峰，征服自我' },
  { name: '海滨度假', icon: 'fa-anchor', textColor: 'text-blue-600', borderColor: 'border-blue-200', color: 'bg-gradient-to-br from-blue-500 to-cyan-600', tagline: '阳光沙滩，海浪微风' },
  { name: '历史人文', icon: 'fa-university', textColor: 'text-amber-600', borderColor: 'border-amber-200', color: 'bg-gradient-to-br from-amber-500 to-orange-600', tagline: '穿越时光，感悟历史' },
  { name: '美食探店', icon: 'fa-cutlery', textColor: 'text-rose-600', borderColor: 'border-rose-200', color: 'bg-gradient-to-br from-rose-500 to-red-600', tagline: '舌尖上的旅行，味蕾的盛宴' },
  { name: '极限运动', icon: 'fa-bolt', textColor: 'text-purple-600', borderColor: 'border-purple-200', color: 'bg-gradient-to-br from-purple-500 to-indigo-600', tagline: '刺激挑战，释放激情' },
  { name: '摄影圣地', icon: 'fa-camera', textColor: 'text-cyan-600', borderColor: 'border-cyan-200', color: 'bg-gradient-to-br from-cyan-500 to-blue-600', tagline: '定格瞬间，记录美好' },
  { name: '主题乐园', icon: 'fa-magic', textColor: 'text-pink-600', borderColor: 'border-pink-200', color: 'bg-gradient-to-br from-pink-500 to-purple-600', tagline: '欢乐时光，童心未泯' },
  { name: '自然风光', icon: 'fa-leaf', textColor: 'text-green-600', borderColor: 'border-green-200', color: 'bg-gradient-to-br from-green-500 to-emerald-600', tagline: '亲近自然，返璞归真' }
];

// 存储用户选择的偏好
const selectedHobbies = ref([]);
// 推荐的地区
const recommendedRegions = ref([]);
// 是否显示推荐结果
const showRecommendations = ref(false);

// 模拟数据 - 热门美食攻略
const foodGuides = [
  {
    title: '成都小吃地图',
    location: '成都',
    price: '人均50元吃到爽',
    image: '/src/assets/成都.webp',
    likes: 1245
  },
  {
    title: '广州早茶指南',
    location: '广州',
    price: '人均80元体验广式风味',
    image: '/src/assets/早茶.webp',
    likes: 987
  },
  {
    title: '西安回民街必吃',
    location: '西安',
    price: '人均30元尝遍西北风味',
    image: '/src/assets/西安.webp',
    likes: 863
  }
];

// 模拟数据 - 最新旅行心得
const travelNotes = [
  {
    title: '我的川藏318骑行日记',
    author: '背包客小明',
    date: '2023-08-15',
    image: '/src/assets/古城.webp',
    comments: 135,
    likes: 2156
  },
  {
    title: '云南小众景点探秘',
    author: '旅行摄影师',
    date: '2023-08-10',
    image: '/src/assets/极光.webp',
    comments: 89,
    likes: 1678
  },
  {
    title: '大学生穷游江南攻略',
    author: '省钱小能手',
    date: '2023-08-05',
    image: '/src/assets/水乡.webp',
    comments: 210,
    likes: 1987
  }
];

// 搜索功能
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim();
    
    // 执行搜索逻辑
    console.log(`搜索: ${query}`);
    
    // 滚动到结果区域
    setTimeout(() => {
      // 尝试找到相关内容区域
      const resultSection = document.querySelector('.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-6.mb-12');
      if (resultSection) {
        resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }, 100);
    
    // 实际项目中可以在这里过滤展示的内容
    // 例如：根据搜索词过滤地区、美食或旅行心得
  }
};

// 查看地区详情
const viewRegionDetail = (region) => {
  selectedRegion.value = region;
  showRegionDetail.value = true;
  // 添加到浏览记录
  addToHistory(region);
};

// 关闭地区详情
const closeRegionDetail = () => {
  showRegionDetail.value = false;
  selectedRegion.value = null;
};

// 选择/取消选择爱好标签
const selectHobby = (hobby) => {
  const index = selectedHobbies.value.findIndex(h => h.name === hobby.name);
  
  if (index > -1) {
    // 取消选择
    selectedHobbies.value.splice(index, 1);
  } else {
    // 添加选择（限制最多选择3个）
    if (selectedHobbies.value.length < 3) {
      selectedHobbies.value.push(hobby);
    } else {
      // 提示用户最多选择3个
      alert('最多可以选择3个旅行偏好哦~');
      return;
    }
  }
  
  // 如果有选择的偏好，则显示推荐
  if (selectedHobbies.value.length > 0) {
    filterRegionsByHobbies();
    showRecommendations.value = true;
  } else {
    showRecommendations.value = false;
  }
};

// 详细目的地推荐数据
const destinationsData = {
  '徒步登山': [
    {
      name: '黄山',
      location: '安徽省黄山市',
      description: '以奇松、怪石、云海、温泉、冬雪 "五绝" 闻名于世，登山路线多样，如南大门的慈光阁路线和北大门的松谷庵路线，能让徒步者领略到不同的风景。',
      highlights: ['奇松怪石', '云海奇观', '温泉资源', '登山线路丰富'],
      image: '/src/assets/黄山.webp'
    },
    {
      name: '长白山',
      location: '吉林省',
      description: '有北坡、西坡等多个登山路线。北坡可以观赏到天池、瀑布、绿渊潭等景点；西坡则可以看到高山花园、大峡谷等，春季还能看到高山杜鹃在雪景中绽放的美景。',
      highlights: ['天池美景', '瀑布奇观', '高山花园', '四季景观各异'],
      image: '/src/assets/长白山.webp'
    },
    {
      name: '江郎山',
      location: '浙江省衢州市江山市',
      description: '是国家级风景名胜区。其主峰海拔 824 米，以 "奇峰赤壁" 为主要特色，属典型的丹霞地貌景区，徒步过程中可以欣赏到独特的丹霞地貌和壮观的山峰景色。',
      highlights: ['丹霞地貌', '奇峰赤壁', '国家风景名胜区', '壮观山峰'],
      image: '/src/assets/江郎山.webp'
    }
  ],
  '海滨度假': [
    {
      name: '三亚',
      location: '海南岛最南端',
      description: '有亚龙湾、海棠湾、三亚湾等多个优质海湾。亚龙湾沙质水质绝佳，是国际五星级酒店的云集之地；蜈支洲岛是浪漫的潜水度假胜地；西岛则是海上休闲娱乐运动胜地。',
      highlights: ['亚龙湾', '蜈支洲岛', '西岛', '优质海滩', '丰富水上活动'],
      image: '/src/assets/三亚.webp'
    },
    {
      name: '青岛',
      location: '山东半岛南端',
      description: '拥有栈桥、八大关、金沙滩等著名海滨景点。栈桥是青岛的标志性建筑，八大关景色优美，被誉为 "万国建筑博览馆"，金沙滩则以其细腻的沙滩和广阔的海域吸引着众多游客。',
      highlights: ['栈桥', '八大关', '金沙滩', '万国建筑', '啤酒文化'],
      image: '/src/assets/青岛1.webp'
    },
    {
      name: '巴厘岛',
      location: '印度尼西亚',
      description: '印度尼西亚著名的旅游胜地，有库塔海滩、努沙杜瓦海滩、金巴兰海滩等多个美丽海滩。库塔海滩热闹非凡，是冲浪爱好者的天堂；努沙杜瓦海滩则以其宁静和高端的度假村而闻名。',
      highlights: ['库塔海滩', '努沙杜瓦海滩', '金巴兰海滩', '冲浪胜地', '高端度假村'],
      image: '/src/assets/巴厘岛.webp'
    }
  ],
  '历史人文': [
    {
      name: '北京',
      location: '中国首都',
      description: '拥有众多历史文化遗迹。故宫博物院是明清两朝的皇家宫殿群，是世界上现存规模最大、保存最为完整的木质结构古建筑群之一；八达岭长城是万里长城的重要组成部分，有着 "不到长城非好汉" 的美誉。',
      highlights: ['故宫博物院', '八达岭长城', '天安门广场', '中国国家博物馆', '皇家园林'],
      image: '/src/assets/北京.webp'
    },
    {
      name: '西安',
      location: '陕西省',
      description: '是中国四大古都之一，历史文化底蕴深厚。秦始皇陵兵马俑是世界闻名的考古遗址，被誉为 "世界第八大奇迹"；古城墙是中国现存规模最大、保存最完整的古代城垣。',
      highlights: ['兵马俑', '古城墙', '大雁塔', '小雁塔', '回民街'],
      image: '/src/assets/西安.webp'
    },
    {
      name: '衢州',
      location: '浙江省',
      description: '有着万年文化史和四千多年的建城史，建城史位列浙江省第二。衢州古城文化旅游区以南孔文化为核心，拥有国内仅有的两座孔氏家庙之一 —— 衢州孔氏南宗家庙。',
      highlights: ['南宗孔庙', '衢州古城', '江郎山', '廿八都古镇', '根宫佛国'],
      image: '/src/assets/衢州.webp'
    }
  ],
  '美食探店': [
    {
      name: '温州',
      location: '浙江省',
      description: '温州美食丰富多样，有真味海鲜、地道瓯菜、特色小吃等。五马 — 墨池历史文化街区、南塘文化旅游区、梧田老街等都是美食集聚地，在这里可以品尝到温州鱼饼、江蟹生、杏仁腐等特色美食。',
      highlights: ['温州鱼饼', '江蟹生', '杏仁腐', '五马街', '瓯菜'],
      image: '/src/assets/温州.webp'
    },
    {
      name: '成都',
      location: '四川省',
      description: '作为川菜的发源地，成都美食以其麻辣鲜香的口味闻名全国。宽窄巷子、锦里古街、春熙路等都是成都著名的美食街，在这里可以品尝到火锅、串串香、川菜等各种美食。',
      highlights: ['火锅', '串串香', '川菜', '宽窄巷子', '锦里古街'],
      image: '/src/assets/成都.webp'
    },
    {
      name: '广州',
      location: '广东省',
      description: '广州是粤菜的代表城市，美食文化源远流长。北京路步行街、上下九步行街、天河城等都是广州著名的美食商圈，在这里可以品尝到早茶、烧腊、海鲜等各种美食。',
      highlights: ['广式早茶', '烧腊', '海鲜', '北京路', '上下九'],
      image: '/src/assets/广州1.webp'
    }
  ],
  '极限运动': [
    {
      name: '冰岛',
      location: '北欧',
      description: '是冰与火的终极试炼场，冬季可以深入蓝冰洞探险，感受万年冰川的脉搏；夏季可以徒步兰德曼纳劳卡高地，穿越色彩斑斓的流纹岩山脉，还可以进入火山内部，或是在两大板块裂缝间浮潜。',
      highlights: ['蓝冰洞探险', '冰川徒步', '火山内部', '板块裂缝浮潜', '极光观赏'],
      image: '/src/assets/冰岛.webp'
    },
    {
      name: '留尼汪',
      location: '印度洋',
      description: '富尔奈斯火山是世界上最活跃的火山之一，徒步至火山口边缘，亲眼目睹地球的呼吸，是无可替代的体验。此外，还可以通过滑翔伞从空中俯瞰巨大的火山口和冰斗地貌。',
      highlights: ['火山口徒步', '滑翔伞', '冰斗地貌', '火山熔岩洞', '深谷探险'],
      image: '/src/assets/留尼汪.webp'
    },
    {
      name: '斯瓦尔巴群岛',
      location: '挪威',
      description: '这里是北极熊的王国，冬季可以乘坐雪地摩托追寻极光，夏季可以乘坐皮划艇穿梭于冰川之间，还可以参加数日的帆船远征，探索更偏远的区域。',
      highlights: ['雪地摩托', '极光观赏', '皮划艇', '帆船远征', '北极熊观察'],
      image: '/src/assets/挪威斯瓦尔巴群岛.webp'
    }
  ],
  '摄影圣地': [
    {
      name: '长白山',
      location: '吉林省',
      description: '长白山的自然景观非常壮观，有天池、瀑布、绿渊潭等景点，春季还能看到高山杜鹃在雪景中绽放的美景，是摄影爱好者的天堂。',
      highlights: ['天池', '瀑布', '绿渊潭', '高山杜鹃', '冬季雪景'],
      image: '/src/assets/长白山.webp'
    },
    {
      name: '松岭村',
      location: '吉林省临江',
      description: '松岭村位于长白山老岭山脉东麓，春季山花烂漫，尤其是梨花、李子花迎春怒放，漫山遍野的花海与关东木把文化风格的村庄屋舍相互掩映，形成了如诗如画的美景。',
      highlights: ['春季花海', '关东木屋', '山村风光', '四季变换', '人文风情'],
      image: '/src/assets/吉林临江松岭村.webp'
    },
    {
      name: '净月潭',
      location: '吉林省长春',
      description: '地处吉林省东部山地向西部草原过渡地带，属长白山余脉低山丘陵，一年四季变化明显，是典型的温带半干旱与半潮湿的气候区，这里的春花、秋叶、冬雪都非常美丽，是摄影的好地方。',
      highlights: ['春花', '秋叶', '冬雪', '森林湖泊', '四季景观'],
      image: '/src/assets/长春净月潭国家森林公园.webp'
    }
  ],
  '主题乐园': [
    {
      name: '北京环球度假区',
      location: '北京市通州区',
      description: '位于北京市通州区，是亚洲的第三座、全球的第五座环球影城主题乐园。这里有哈利・波特、变形金刚、功夫熊猫等多个热门主题区域，还有各种精彩的表演和游乐设施。',
      highlights: ['哈利波特魔法世界', '变形金刚基地', '功夫熊猫盖世之地', '小黄人乐园', '未来水世界表演'],
      image: '/src/assets/北京环球度假区.webp'
    },
    {
      name: '上海迪士尼度假区',
      location: '上海市浦东新区',
      description: '位于上海市浦东新区，是中国内地首座迪士尼主题乐园。这里有米奇大街、奇想花园、探险岛、宝藏湾等多个主题园区，还有各种经典的迪士尼游乐设施和精彩的演出。',
      highlights: ['米奇大街', '奇想花园', '探险岛', '宝藏湾', '迪士尼城堡', '烟花表演'],
      image: '/src/assets/上海迪士尼度假区.webp'
    },
    {
      name: '云顶世界主题乐园',
      location: '马来西亚彭亨州',
      description: '位于马来西亚彭亨州云顶高原，是一个亲子游玩的大型综合游乐园，有各种刺激的游乐设施和精彩的表演，还有云天缆车可以欣赏云顶高原的壮丽景色。',
      highlights: ['刺激游乐设施', '云天缆车', '室内游乐场', '主题表演', '云顶高原美景'],
      image: '/src/assets/云顶天城世界主题乐园.webp'
    }
  ],
  '自然风光': [
    {
      name: '张家界',
      location: '湖南省张家界市',
      description: '位于湖南省张家界市，以其独特的石英砂岩峰林地貌而闻名于世。这里有奇峰异石、峡谷深壑、溪流飞瀑等自然景观，如张家界国家森林公园、天门山国家森林公园等。',
      highlights: ['石英砂岩峰林', '天门山', '玻璃桥', '金鞭溪', '袁家界'],
      image: '/src/assets/张家界.webp'
    },
    {
      name: '九寨沟',
      location: '四川省阿坝州',
      description: '位于四川省阿坝藏族羌族自治州九寨沟县，有 "童话世界" 之称。这里有五彩斑斓的湖泊、气势磅礴的瀑布、原始森林等自然景观，是一个令人陶醉的地方。',
      highlights: ['五彩池', '诺日朗瀑布', '原始森林', '藏寨风情', '雪山融水'],
      image: '/src/assets/九寨沟1.webp'
    },
    {
      name: '喀纳斯',
      location: '新疆阿勒泰地区',
      description: '位于新疆维吾尔自治区阿勒泰地区布尔津县北部，有高山、河流、森林、湖泊、草原等自然景观。喀纳斯湖是中国最深的高山湖泊，湖水清澈见底，周围群山环绕，景色非常美丽。',
      highlights: ['喀纳斯湖', '原始森林', '图瓦人村落', '晨雾奇观', '变色湖水'],
      image: '/src/assets/新疆喀纳斯.webp'
    }
  ]
};

// 根据选择的偏好过滤推荐地区
const filterRegionsByHobbies = () => {
  // 收集所有推荐的目的地
  let allDestinations = [];
  
  // 根据选择的每个偏好获取对应的目的地
  selectedHobbies.value.forEach(hobby => {
    const destinations = destinationsData[hobby.name] || [];
    // 为每个目的地添加匹配标签和来源
    const taggedDestinations = destinations.map(dest => ({
      ...dest,
      matchingHobbies: [hobby.name],
      matchingScore: 1
    }));
    allDestinations = [...allDestinations, ...taggedDestinations];
  });
  
  // 如果只有一个偏好，直接返回该偏好下的目的地
  if (selectedHobbies.value.length === 1) {
    recommendedRegions.value = allDestinations;
    return;
  }
  
  // 对于多个偏好，需要合并和排序（按匹配度）
  const destinationMap = {};
  
  // 合并匹配相同目的地的数据
  allDestinations.forEach(dest => {
    if (destinationMap[dest.name]) {
      // 如果已经存在，增加匹配分数和标签
      destinationMap[dest.name].matchingScore += 1;
      destinationMap[dest.name].matchingHobbies = [...new Set([...destinationMap[dest.name].matchingHobbies, ...dest.matchingHobbies])];
    } else {
      destinationMap[dest.name] = dest;
    }
  });
  
  // 转换回数组并按匹配分数排序
  const sortedDestinations = Object.values(destinationMap)
    .sort((a, b) => b.matchingScore - a.matchingScore);
  
  recommendedRegions.value = sortedDestinations;
};

// 查看美食攻略详情
const viewFoodGuide = (guide) => {
  // 实际项目中这里应该跳转到攻略详情页
  console.log(`查看攻略: ${guide.title}`);
  // 例如: router.push({ name: 'FoodGuideDetail', params: { id: guide.id } });
};

// 查看旅行心得详情
const viewTravelNote = (note) => {
  // 实际项目中这里应该跳转到心得详情页
  console.log(`查看心得: ${note.title}`);
  // 例如: router.push({ name: 'TravelNoteDetail', params: { id: note.id } });
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-green-50 font-sans w-full">
    <!-- 使用导航栏组件 -->
    <TheNavBar />
    
    <!-- 搜索栏 -->
    <div class="z-20">
      <div class="container mx-auto px-4 py-3 flex justify-center">
        <div class="relative flex-grow max-w-xl">
          <input 
            v-model="searchQuery"
            @keyup.enter="handleSearch"
            type="text" 
            placeholder="搜索景点、城市、美食..." 
            class="w-full pl-10 pr-12 py-2 rounded-full border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none shadow-sm"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <button @click="handleSearch" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="w-full px-4 py-6">
      <!-- 欢迎语 -->
      <div class="mb-8 text-center">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">嘿，同学！你的旅行计划好了吗？</h1>
        <p class="text-gray-600 text-lg">青春只有一次，何不疯狂一次？</p>
      </div>

      <!-- 四大核心模块 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <!-- 景点地区分类 -->
        <RouterLink to="/areasort" class="feature-card bg-white rounded-2xl shadow-lg p-6 cursor-pointer hover-scale transition-all duration-300">
          <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mb-4">
            <i class="fa fa-map-marker text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold text-dark mb-2">景点地区分类</h3>
          <p class="text-gray-600 mb-4">按国内热门地区或城市探索美景</p>
          <div class="flex flex-wrap gap-2">
            <span v-for="(region, index) in regions.slice(0, 4)" :key="index" class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full">
              {{ region.name }}
            </span>
            <span class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded-full">
              +{{ regions.length - 4 }}个
            </span>
          </div>
        </RouterLink>

        <!-- 个人爱好 -->
        <RouterLink to="/hobby" class="feature-card bg-white rounded-2xl shadow-lg p-6 cursor-pointer hover-scale transition-all duration-300">
          <div class="w-16 h-16 rounded-full bg-rose-100 flex items-center justify-center text-rose-500 mb-4">
            <i class="fa fa-heart text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold text-dark mb-2">个人爱好</h3>
          <p class="text-gray-600 mb-4">选择你的旅行偏好，智能推荐内容</p>
          <div class="flex flex-wrap gap-2">
            <span v-for="(hobby, index) in hobbies.slice(0, 4)" :key="index" class="text-xs bg-rose-50 text-rose-600 px-2 py-1 rounded-full">
              {{ hobby.name }}
            </span>
            <span class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded-full">
              +{{ hobbies.length - 4 }}个
            </span>
          </div>
        </RouterLink>

        <!-- 美食攻略 -->
        <RouterLink to="/food" class="feature-card bg-white rounded-2xl shadow-lg p-6 cursor-pointer hover-scale transition-all duration-300">
          <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center text-amber-500 mb-4">
            <i class="fa fa-cutlery text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold text-dark mb-2">美食攻略</h3>
          <p class="text-gray-600 mb-4">汇集各地特色美食，高性价比推荐</p>
          <div class="flex flex-wrap gap-2">
            <span class="text-xs bg-amber-50 text-amber-600 px-2 py-1 rounded-full">成都小吃</span>
            <span class="text-xs bg-amber-50 text-amber-600 px-2 py-1 rounded-full">广州早茶</span>
            <span class="text-xs bg-amber-50 text-amber-600 px-2 py-1 rounded-full">西安面食</span>
            <span class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded-full">+更多</span>
          </div>
        </RouterLink>

        <!-- 旅游心得交流 -->
        <RouterLink to="/share" class="feature-card bg-white rounded-2xl shadow-lg p-6 cursor-pointer hover-scale transition-all duration-300">
          <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-500 mb-4">
            <i class="fa fa-comments text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold text-dark mb-2">旅游心得交流</h3>
          <p class="text-gray-600 mb-4">分享你的旅行故事，获取真实攻略</p>
          <div class="flex flex-wrap gap-2">
            <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">川藏骑行</span>
            <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">云南探秘</span>
            <span class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full">江南穷游</span>
            <span class="text-xs bg-gray-50 text-gray-600 px-2 py-1 rounded-full">+更多</span>
          </div>
        </RouterLink>
      </div>

      <!-- 景点地区分类模块 -->
      <section class="mb-16">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-dark">热门地区</h2>
          <RouterLink to="/areasort" class="text-primary hover:text-primary/80 font-medium flex items-center">
            查看全部 <i class="fa fa-angle-right ml-1"></i>
          </RouterLink>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          <div v-for="region in regions" :key="region.name" class="rounded-xl overflow-hidden shadow-md hover-scale transition-all duration-300 cursor-pointer relative" @click="viewRegionDetail(region)">
            <div class="relative h-32">
              <img :src="region.image" :alt="region.name" class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
              <div class="absolute bottom-2 left-2 right-2 text-white">
                <p class="font-bold">{{ region.name }}</p>
                <p class="text-xs opacity-80">{{ region.count }}个景点</p>
              </div>
              <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/30">
                <div class="text-white bg-primary/80 px-3 py-1 rounded-full text-sm">
                  查看详情
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 地区详情弹窗 -->
      <Transition name="modal">
        <div v-if="showRegionDetail && selectedRegion" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4">
          <div class="bg-white rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <!-- 详情头部 -->
            <div class="relative h-64">
              <img :src="selectedRegion.image" :alt="selectedRegion.name" class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
              <button class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 transition-colors" @click="closeRegionDetail">
                <i class="fa fa-times text-xl"></i>
              </button>
              <div class="absolute bottom-6 left-6 right-6 text-white">
                <h3 class="text-3xl font-bold mb-2">{{ selectedRegion.name }}</h3>
                <p class="text-white/80">{{ selectedRegion.count }}个景点</p>
              </div>
            </div>
            
            <!-- 详情内容 -->
            <div class="p-6">
              <!-- 人文历史 -->
              <div class="mb-8">
                <h4 class="text-xl font-bold text-dark mb-3 flex items-center">
                  <i class="fa fa-book text-primary mr-2"></i>人文历史
                </h4>
                <p class="text-gray-700 leading-relaxed">{{ selectedRegion.history }}</p>
              </div>
              
              <!-- 风景名胜 -->
              <div class="mb-8">
                <h4 class="text-xl font-bold text-dark mb-3 flex items-center">
                  <i class="fa fa-mountain text-primary mr-2"></i>风景名胜
                </h4>
                <div class="flex flex-wrap gap-3">
                  <span v-for="(spot, index) in selectedRegion.scenery" :key="index" class="px-4 py-2 bg-blue-50 text-blue-700 rounded-full text-sm">
                    {{ spot }}
                  </span>
                </div>
              </div>
              
              <!-- 特色美食 -->
              <div class="mb-8">
                <h4 class="text-xl font-bold text-dark mb-3 flex items-center">
                  <i class="fa fa-cutlery text-primary mr-2"></i>特色美食
                </h4>
                <div class="flex flex-wrap gap-3">
                  <span v-for="(food, index) in selectedRegion.food" :key="index" class="px-4 py-2 bg-amber-50 text-amber-700 rounded-full text-sm">
                    {{ food }}
                  </span>
                </div>
              </div>
              
              <!-- 打卡地点 -->
              <div class="mb-8">
                <h4 class="text-xl font-bold text-dark mb-3 flex items-center">
                  <i class="fa fa-map-marker text-primary mr-2"></i>打卡地点
                </h4>
                <div class="flex flex-wrap gap-3">
                  <span v-for="(place, index) in selectedRegion.checkIn" :key="index" class="px-4 py-2 bg-green-50 text-green-700 rounded-full text-sm">
                    {{ place }}
                  </span>
                </div>
              </div>
              
              <!-- 底部操作区 -->
              <div class="flex justify-between mt-8">
                <button 
                  @click="toggleFavorite(selectedRegion)"
                  class="px-6 py-3 bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 rounded-full transition-all duration-150 flex items-center shadow-sm hover:shadow-md"
                >
                  <i :class="['fa', isFavorite(selectedRegion) ? 'fa-heart' : 'fa-heart-o', 'mr-2']" :style="{ color: isFavorite(selectedRegion) ? '#FF3B30' : '#666' }"></i>
                  {{ isFavorite(selectedRegion) ? '已收藏' : '收藏地点' }}
                </button>
                <button class="px-6 py-3 bg-primary hover:bg-primary/90 text-white rounded-full transition-colors flex items-center shadow-md">
                  <i class="fa fa-search mr-2"></i> 探索{{ selectedRegion.name }}景点
                </button>
              </div>
            </div>
          </div>
        </div>
      </Transition>

      <!-- 个人爱好标签模块 - 优化交互 -->
      <section class="mb-16">
        <div class="bg-white rounded-2xl shadow-md p-8 hover-scale transition-all duration-300">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-dark">选择你的旅行偏好</h2>
            <span class="text-sm text-gray-500">
              {{ selectedHobbies.length }}/3
            </span>
          </div>
          
          <!-- 选择指南 -->
          <p class="text-gray-600 mb-6">
            选择1-3个旅行偏好，我们将为你推荐最适合的目的地
          </p>
          
          <!-- 偏好标签网格 -->
          <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 mb-8">
            <div 
              v-for="hobby in hobbies" 
              :key="hobby.name" 
              @click="selectHobby(hobby)"
              class="cursor-pointer transition-all duration-200 hover:scale-105 transform group"
            >
              <div 
                :class="[
                  'w-16 h-16 rounded-full flex items-center justify-center text-white transition-all duration-300 relative overflow-hidden',
                  hobby.color,
                  isHobbySelected(hobby) ? 'ring-4 ring-primary ring-offset-2 scale-110' : 'hover:shadow-lg'
                ]"
              >
                <i :class="['fa', hobby.icon, 'text-xl transition-transform duration-300 group-hover:scale-125']"></i>
                <!-- 选中效果：小勾 -->
                <div v-if="isHobbySelected(hobby)" class="absolute inset-0 bg-white/20 rounded-full flex items-center justify-center">
                  <i class="fa fa-check text-white text-lg"></i>
                </div>
              </div>
              <p class="text-center mt-2 text-gray-700 font-medium">{{ hobby.name }}</p>
              <p class="text-center text-xs text-gray-400">{{ hobby.tagline }}</p>
            </div>
          </div>
          
          <!-- 探索按钮 - 优化设计，未选择时不显示文字 -->
          <div class="mt-6 text-center">
            <div v-if="selectedHobbies.length > 0">
              <button 
                @click="showRecommendations = true"
                class="px-8 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 bg-primary text-white shadow-md hover:shadow-lg hover:bg-primary/90 active:scale-95"
              >
                开始探索推荐目的地
                <i class="fa fa-arrow-right ml-2 animate-pulse"></i>
              </button>
            </div>
            <div v-else class="opacity-70">
              <div class="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full">
                <i class="fa fa-compass text-gray-400 text-xl animate-pulse"></i>
              </div>
              <p class="mt-2 text-sm text-gray-500">选择偏好后开始探索</p>
            </div>
          </div>
          
          <!-- 推荐结果展示 - 只有选择后才显示 -->
          <transition name="fade">
            <div v-if="showRecommendations && recommendedRegions.length > 0" class="mt-10">
              <div class="mb-6">
                <h3 class="text-xl font-bold text-dark mb-2">为你推荐的目的地</h3>
                <p class="text-gray-600">
                  基于你的旅行偏好「{{ selectedHobbies.map(h => h.name).join('、') }}」
                </p>
              </div>
              
              <!-- 匹配度标签 -->
              <div class="flex flex-wrap gap-2 mb-6">
                <span v-for="hobby in selectedHobbies" :key="hobby.name" class="inline-flex items-center px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm">
                  <i class="fa fa-tag mr-1"></i>{{ hobby.name }}
                </span>
                <span class="inline-flex items-center px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm">
                  <i class="fa fa-map-marker mr-1"></i>{{ recommendedRegions.length }}个推荐地点
                </span>
              </div>
              
              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div 
                  v-for="(destination, index) in recommendedRegions" 
                  :key="destination.name"
                  class="rounded-xl overflow-hidden shadow-md hover-scale transition-all duration-300 cursor-pointer relative bg-white border border-gray-100 group"
                >
                  <div class="relative h-48 overflow-hidden">
                    <img 
                      :src="destination.image" 
                      :alt="destination.name" 
                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    >
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    
                    <!-- 排名标签 -->
                    <div class="absolute top-3 left-3 bg-white/90 text-primary px-2 py-1 rounded-full text-sm font-bold">
                      #{{ index + 1 }}
                    </div>
                    
                    <!-- 匹配度标签 -->
                    <div class="absolute top-3 right-3 bg-primary/90 text-white px-2 py-1 rounded-full text-xs font-medium">
                      {{ destination.matchingHobbies?.length || 1 }}个偏好匹配
                    </div>
                    
                    <div class="absolute bottom-4 left-4 right-4 text-white">
                      <p class="text-2xl font-bold mb-1">{{ destination.name }}</p>
                      <p class="text-sm opacity-90 flex items-center">
                        <i class="fa fa-map-marker mr-1"></i>
                        {{ destination.location }}
                      </p>
                    </div>
                  </div>
                  
                  <!-- 目的地特色 -->
                  <div class="p-4">
                    <!-- 特色标签 -->
                    <div class="flex flex-wrap gap-1.5 mb-3">
                      <span 
                        v-for="(highlight, i) in destination.highlights.slice(0, 4)" 
                        :key="i" 
                        class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full"
                      >
                        {{ highlight }}
                      </span>
                    </div>
                    
                    <!-- 目的地简介 -->
                    <p class="text-sm text-gray-600 line-clamp-2 mb-3">
                      {{ destination.description }}
                    </p>
                    
                    <!-- 匹配理由 -->
                    <p class="text-xs text-gray-500">
                      <i class="fa fa-heart text-rose-500 mr-1"></i>
                      因为你喜欢{{ destination.matchingHobbies?.join('和') || '旅行' }}
                    </p>
                  </div>
                  
                  <!-- 查看详情按钮 -->
                  <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <button class="bg-white text-primary px-4 py-2 rounded-full text-sm font-medium shadow-lg hover:bg-primary hover:text-white transition-colors">
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 探索更多按钮 -->
              <div class="text-center mt-6">
                <button 
                  @click="router.push('/areasort')"
                  class="px-6 py-2 border border-primary text-primary rounded-full transition-all duration-300 hover:bg-primary/5"
                >
                  探索更多目的地
                </button>
              </div>
            </div>
          </transition>
        </div>
      </section>

      <!-- 美食攻略模块 -->
      <section class="mb-16">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-dark">美食攻略</h2>
          <RouterLink to="/food" class="text-primary hover:text-primary/80 font-medium flex items-center">
            查看全部 <i class="fa fa-angle-right ml-1"></i>
          </RouterLink>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div v-for="guide in foodGuides" :key="guide.title" class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300 cursor-pointer" @click="viewFoodGuide(guide)">
            <div class="relative h-48">
              <img :src="guide.image" :alt="guide.title" class="w-full h-full object-cover">
              <div class="absolute top-3 left-3 bg-white/90 text-primary px-2 py-1 rounded-md text-sm font-medium">
                {{ guide.location }}
              </div>
              <div class="absolute top-3 right-3 bg-amber-500/90 text-white px-2 py-1 rounded-md text-sm font-medium">
                {{ guide.price }}
              </div>
            </div>
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">{{ guide.title }}</h3>
              <div class="flex items-center text-gray-500 text-sm">
                <i class="fa fa-heart-o mr-1"></i>
                <span>{{ guide.likes }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 旅游心得交流模块 -->
      <section class="mb-16">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-dark">旅行心得</h2>
          <button class="text-primary hover:text-primary/80 font-medium flex items-center">
            查看全部 <i class="fa fa-angle-right ml-1"></i>
          </button>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div v-for="note in travelNotes" :key="note.title" class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300 cursor-pointer" @click="viewTravelNote(note)">
            <div class="relative h-48">
              <img :src="note.image" :alt="note.title" class="w-full h-full object-cover">
            </div>
            <div class="p-4">
              <h3 class="font-bold text-lg mb-2">{{ note.title }}</h3>
              <div class="flex justify-between items-center text-gray-500 text-sm mb-3">
                <span>{{ note.author }}</span>
                <span>{{ note.date }}</span>
              </div>
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <div class="flex items-center">
                  <i class="fa fa-comment-o mr-1"></i>
                  <span>{{ note.comments }}</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-heart-o mr-1"></i>
                  <span>{{ note.likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 发布心得按钮 -->
        <div class="text-center mt-8">
          <button class="px-8 py-3 rounded-full bg-secondary hover:bg-secondary/90 text-white font-semibold transition-all duration-300 shadow-lg hover-scale">
            发布你的旅行心得 <i class="fa fa-pencil ml-2"></i>
          </button>
        </div>
      </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="w-full px-4 text-center">
        <p class="mb-4"><i class="fa fa-paper-plane mr-2"></i>校友行 - 大学生专属旅行社区</p>
        <p class="text-gray-400 text-sm">© 2023 校友行. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
:root {
  --primary: #FF7A45; /* 活力橙 */
  --secondary: #40A9FF; /* 清新蓝 */
  --tertiary: #52C41A; /* 生机绿 */
  --dark: #1F2937;
  --light: #F9FAFB;
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-dark {
  color: var(--dark);
}

.text-gray-600 {
  color: #4B5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-500 {
  color: #6B7280;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  .duration-150 {
    transition-duration: 150ms;
  }

  .duration-200 {
    transition-duration: 200ms;
  }

  .duration-300 {
    transition-duration: 300ms;
  }
  
  /* 淡入淡出动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  /* 选中效果的自定义动画 */
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
  }

/* 弹窗动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .bg-white,
.modal-leave-to .bg-white {
  transform: scale(0.9);
}

/* 自定义滚动条 */
.max-h\[90vh\]::-webkit-scrollbar {
  width: 6px;
}

.max-h\[90vh\]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.max-h\[90vh\]::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.max-h\[90vh\]::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .lg\:grid-cols-4,
  .lg\:grid-cols-6 {
    grid-template-columns: 1fr 1fr;
  }
  
  .md\:grid-cols-2,
  .md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .nav .flex-grow {
    display: none;
  }
  
  /* 移动端弹窗调整 */
  .max-w-4xl {
    max-width: 100%;
  }
  
  .h-64 {
    height: 40vh;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
  
  .lg\:grid-cols-6 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
</style>

<style>
/* 全局样式 - 移除CDN依赖，使用项目内的Font Awesome */

/* 修复移动端底部安全区域 */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
</style>